<template>
	<div ref="chartRef" :style="{height, width}"></div>
</template>
<script lang="ts">
	import {defineComponent, onMounted, PropType, ref, Ref, reactive, watchEffect} from 'vue';
	import {useECharts} from '/@/hooks/web/useECharts';
	import {cloneDeep} from 'lodash-es';
	export default defineComponent({
		name: 'bar',
		props: {
			chartData: {
				type: Array,
				default: () => [],
			},
			option: {
				type: Object,
				default: () => ({}),
			},
			width: {
				type: String as PropType<string>,
				default: '100%',
			},
			height: {
				type: String as PropType<string>,
				default: '160px',
			},
		},
		setup(props) {
			const chartRef = ref<HTMLDivElement | null>(null);
			const {setOptions, resize} = useECharts(chartRef as Ref<HTMLDivElement>);
			onMounted(() => {
				window.addEventListener('resize', function () {
					resize();
				});
			});

			const option = reactive({
				backgroundColor: '#0c182d',
				title: null,
				series: null,
			});

			watchEffect(() => {
				props.chartData && initCharts(props.chartData);
			});

			function initCharts(chartData) {
				var data = [
					{
						name: '充电量（度）',
						value: chartData.electricEnergy,
					},
					{
						name: '充电次数',
						value: chartData.chargingTimes,
					},
					{
						name: '充电时长（小时）',
						value: chartData.chargingTotalTime,
					},
				];
				var titleArr = [],
					seriesArr = [],
					colors = [
						['#1890ff', '#1a2a47'],
						['#30e8bb', '#1a2a47'],
						['#f8e24c', '#1a2a47'],
					];

				data.forEach(function (item, index) {
					titleArr.push({
						text: item.name,
						left: index * 30 + 20 + '%',
						top: '75%',
						textAlign: 'center',
						textStyle: {
							fontWeight: 'normal',
							fontSize: '12',
							color: '#7D8590',
							textAlign: 'center',
						},
					});
					seriesArr.push({
						name: item.name,
						type: 'pie',
						clockWise: false,

						radius: [35, 42],
						itemStyle: {
							normal: {
								color: colors[index][0],
								shadowColor: colors[index][0],
								shadowBlur: 0,
								label: {
									show: false,
								},
								labelLine: {
									show: false,
								},
							},
						},
						hoverAnimation: false,
						center: [index * 30 + 20 + '%', '45%'],
						data: [
							{
								value: item.value,
								label: {
									normal: {
										formatter: function (params) {
											return params.value;
										},
										position: 'center',
										show: true,
										textStyle: {
											fontSize: '20',
											fontWeight: 'bold',
											color: colors[index][0],
										},
									},
								},
							},
							{
								value: item.value,
								name: 'invisible',
								itemStyle: {
									normal: {
										color: colors[index][1],
									},
									emphasis: {
										color: colors[index][1],
									},
								},
							},
						],
					});
				});
				option.series = seriesArr;
				option.title = titleArr;

				if (props.option) {
					Object.assign(option, cloneDeep(props.option));
				}

				setOptions(option);
			}
			return {chartRef};
		},
	});
</script>
